<template>
  <div>
    <el-row style="padding: 10px" type="flex" justify="center">
      <el-col :span="20">
        <el-form
          ref="elForm"
          :model="formData"
          :rules="rules"
          size="medium"
          label-width="100px"
          label-position="left"
        >
          <el-form-item size="large" style="display: flex;;justify-content: flex-end">
            <el-button type="primary" @click="submitForm">提交</el-button>
            <el-button @click="resetForm">重置</el-button>
          </el-form-item>
          <el-form-item label-width="300px" label="公司名称" prop="companyName">
            <el-input
              v-model="formData.companyName"
              placeholder="请输入公司名称"
              :maxlength="100"
              show-word-limit
              clearable
              prefix-icon="el-icon-mobile"
              :style="{width: '100%'}"
            />
          </el-form-item>
          <el-form-item label-width="300px" label="系统启用日期" prop="appStartupDate">
            <el-date-picker
              v-model="formData.appStartupDate"
              type="date"
              value-format="yyyy-MM-dd"
              :style="{width: '100%'}"
              placeholder="选择日期"
            />
          </el-form-item>
          <el-form-item label-width="300px" label="系统数据外部存储目录" prop="storagePath">
            <el-input
              v-model="formData.storagePath"
              placeholder="请输入系统数据外部存储目录"
              :maxlength="100"
              show-word-limit
              clearable
              prefix-icon="el-icon-folder-opened"
              :style="{width: '100%'}"
            />
          </el-form-item>
          <el-form-item label-width="300px" label="数据库备份默认的.sql文件存储路径" prop="dbBackupPath">
            <el-input
              v-model="formData.dbBackupPath"
              placeholder="请输入数据库备份默认的.sql文件存储路径"
              :maxlength="100"
              show-word-limit
              clearable
              prefix-icon="el-icon-folder-opened"
              :style="{width: '100%'}"
            />
          </el-form-item>
          <el-form-item label-width="300px" label="日志备份excel文件的存储路径" prop="logBackupPath">
            <el-input
              v-model="formData.logBackupPath"
              placeholder="请输入日志备份excel文件的存储路径"
              :maxlength="100"
              show-word-limit
              clearable
              prefix-icon="el-icon-folder-opened"
              :style="{width: '100%'}"
            />
          </el-form-item>
          <el-form-item label-width="300px" label="登录页是否需要验证码" prop="captcha">
            <el-radio-group v-model="formData.captcha" size="medium">
              <el-radio
                v-for="(item, index) in captchaOptions"
                :key="index"
                :label="item.value"
                :disabled="item.disabled"
              >{{ item.label }}</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label-width="300px" label="地区层级" prop="regionLimit">
            <el-input-number v-model="formData.regionLimit" controls-position="right" :min="1" :max="99" @change="handleChange" />
          </el-form-item>
          <el-form-item label-width="300px" label="系统主菜单数量" prop="topMenuLimit">
            <el-input-number v-model="formData.topMenuLimit" controls-position="right" :min="1" :max="99" @change="handleChange" />
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>
<script>
export default {
  components: {},
  props: [],
  data() {
    return {
      formData: {
        companyName: undefined,
        appStartupDate: undefined,
        storagePath: undefined,
        dbBackupPath: undefined,
        logBackupPath: undefined,
        captcha: 2,
        regionLimit: 1,
        topMenuLimit: 1
      },
      rules: {
        companyName: [{
          required: true,
          message: '请输入公司名称',
          trigger: 'blur'
        }],
        appStartupDate: [{
          required: true,
          message: '请输入系统启用日期',
          trigger: 'blur'
        }],
        storagePath: [{
          required: true,
          message: '请输入系统数据外部存储目录',
          trigger: 'blur'
        }],
        dbBackupPath: [{
          required: true,
          message: '请输入数据库备份默认的.sql文件存储路径',
          trigger: 'blur'
        }],
        logBackupPath: [{
          required: true,
          message: '请输入日志备份excel文件的存储路径',
          trigger: 'blur'
        }],
        captcha: [{
          required: true,
          message: '登录页是否需要验证码不能为空',
          trigger: 'change'
        }],
        regionLimit: [{
          required: true,
          message: '请输入地区层级',
          trigger: 'blur'
        }, {
          pattern: /^\d+$/,
          message: '地区层级只能输入正整数',
          trigger: 'blur'
        }],
        topMenuLimit: [{
          required: true,
          message: '请输入系统主菜单数量',
          trigger: 'blur'
        }, {
          pattern: /^\d+$/,
          message: '系统主菜单数量只能输入正整数',
          trigger: 'blur'
        }]
      },
      captchaOptions: [{
        'label': '是',
        'value': 1
      }, {
        'label': '否',
        'value': 2
      }]
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    submitForm() {
      this.$refs['elForm'].validate(valid => {
        if (!valid) return
        // TODO 提交表单
      })
    },
    handleChange(value) {
      console.log(value)
    },
    resetForm() {
      this.$refs['elForm'].resetFields()
    }
  }
}

</script>
<style>
</style>
